<template>
  <div
      class="grid-container-nuclear"
      :style="{
      'grid-template-columns': `repeat(${colCount}, 50px)`,
      'grid-template-rows': `repeat(${rowCount}, 50px)`
    }"
       @mousemove="onmouseover"
       @mouseout="onmouseout"
  >
    <div v-if="_option.tooltips.display" class="core-info-tooltip" ref="infoTooltipRef">
      info
    </div>
    <div v-for="(row, rowIndex) in _option.coreInfo" :key="rowIndex" class="grid-row">
      <div
          v-for="(item, colIndex) in row"
          :key="colIndex"
          style="padding: 5px;border: 1px solid rgba(227,227,227,0.77)"
          @dragover="onDragover"
          @dragleave="onDragLeave"
          @drop="onDrop($event,rowIndex,colIndex)"

      >
        <div
            :data-index="`${rowIndex},${colIndex}`"
            :class="item.type"
            :style="getStyleByType(item,rowIndex,colIndex)"
            class="grid-item"
            draggable="false"
            @click="onclickSelect(rowIndex,colIndex)"
        >
          <span v-show="_option.text">{{ item.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref,computed} from 'vue'
import {getCoreData} from "./data.js";
import {getRotate14} from "./utils.js";
const BLOCK_TYPE={
  REF:'ref',
  FUEL:'fuel',
  NONE:'none',
  AXIS:'axis'
}
const props = defineProps({
  option:{
    type: Object,
    default: {
    }
  },
})
let defaultValue= {
  coreInfo:getCoreData(),
  text:false,
  activePosition:[[2,0]],
  tooltips:{
    display:false
  }
}
const _option=ref({...defaultValue,...props.option})
console.log(_option.value)
const rowCount = computed(() => _option.value.coreInfo.length);
// 计算列数，假设每一行元素数量相同
const colCount = computed(() => _option.value.coreInfo[0].length || 0);
const infoTooltipRef=ref(null)
function getStyleByType(item,rowIndex,colIndex){
  let style={ backgroundColor:item.color }
  if (_option.value.activePosition.length>0){
     _option.value.activePosition.forEach(value=>{
          if (value[0]==rowIndex&&value[1]==colIndex){
            style.boxShadow="0 0 10px 5px rgba(0, 123, 255, 0.5)"
          }
     })
  }

  switch (item.type) {
    case (BLOCK_TYPE.NONE):style.display='none';break;
    case (BLOCK_TYPE.FUEL):;break;
    case (BLOCK_TYPE.REF):;break;
    case (BLOCK_TYPE.AXIS):;break;
  }
  return style
}
function onDragover(e){
  e.preventDefault()
  e.target.classList.add('drag-over')
}
function onDragLeave(e){
  e.preventDefault()
  e.target.classList.remove('drag-over')
}

function onDrop(e,rowIndex,colIndex){
  e.preventDefault()
  let id = e.dataTransfer.getData('id');
  if (BLOCK_TYPE.FUEL === id){
    console.log(rowIndex,colIndex)
    _option.value.coreInfo[rowIndex][colIndex]  = { type: BLOCK_TYPE.FUEL, text: 'FUEL8', color: '#0b2853' }
  }
  e.target.classList.remove('drag-over')
}
function onclickSelect(rowIndex,colIndex){
    let arr = getRotate14(rowIndex,colIndex,15)
     _option.value.activePosition=arr
}
function onmouseover(e){
   if (!infoTooltipRef.value) return
   infoTooltipRef.value.style.opacity=0
   let data_index = e.target.getAttribute('data-index')
   if (data_index){
     // console.log(data_index)
     infoTooltipRef.value.style.opacity=1
     infoTooltipRef.value.style.left=e.clientX+10+'px'
     infoTooltipRef.value.style.top=e.clientY+10+'px'
   }
}
function onmouseout(e){
  if (!infoTooltipRef.value) return
  infoTooltipRef.value.style.opacity=0
}
</script>

<style scoped>
.grid-container-nuclear {
  display: grid;
}

.grid-row {
  display: contents;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-radius: 5px;
  width:100%;
  height:100%;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}
.grid-item:hover {
  box-shadow: 0 0 10px 5px #1a1a1a;
}

.axis {
  color: white;
}

.drag-over {
  background-color: rgba(215,255,207,0.93);
}

.core-info-tooltip{
  opacity: 0;
  position: absolute;
  background-color: white;
  transition: 0.2s ease-in-out;
  width: 100px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
</style>